<template>
  <div>

    <el-container>
      <el-header>
        <h1>物品存放</h1>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-table
              :data="tableData"
              style="width: 100%"
              @row-click="stashById">
            <el-table-column
                prop="name"
                width="180">
            </el-table-column>
          </el-table>
        </el-aside>
        <el-main>
          <el-form :inline="true" :model="deposits" class="demo-form-inline">
            <el-form-item label="标题">
              <el-input v-model="deposits.title" placeholder="标题"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="deposits.status" placeholder="状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="停用" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="stashByIdTitleAndStatus">查询</el-button>
            </el-form-item>
          </el-form>
            <el-button type="primary" @click="openDepositsAdd()">新增</el-button>
          <el-table
              :data="tableData1"
              style="width: 100%;margin-bottom: 20px;"
              row-key="rid"
              border
              default-expand-all
              :tree-props="{children: 'children'}">
            <el-table-column
                prop="title"
                label="名称"
                sortable
                width="150">
            </el-table-column>
            <el-table-column
                prop="name"
                label="所属仓库"
                sortable
                width="150">
            </el-table-column>
            <el-table-column
                prop="path"
                label="全路径"
                sortable
                width="150">
            </el-table-column>
            <el-table-column
                prop="tag"
                label="标签"
                sortable
                width="150">
            </el-table-column>
            <el-table-column
                prop="maxCapacity"
                label="最大容量"
                sortable
                width="150">
            </el-table-column>
            <el-table-column
                prop="stashUnit"
                label="存放内容单位"
                sortable
                width="150">
            </el-table-column>
            <el-table-column
                prop="status"
                label="状态"
                sortable
                width="150">
              <template v-slot="s">
                <el-tag v-if="s.row.status==1">启用</el-tag>
                <el-tag v-if="s.row.status==2">停用</el-tag>
              </template>
            </el-table-column>
            <el-table-column v-slot="s">
              <el-button type="text" size="small" @click="delById(s.row.id)">
                <i class="el-icon-delete"></i>
              </el-button>
              <el-button type="text" size="small" @click="openUpdate(s.row)">
                <i class="el-icon-edit"></i>
              </el-button>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog title="添加仓库" :visible.sync="dialogFormVisible">
      <el-form :model="depositsFrom">
        <el-form-item label="所属仓库" :label-width="formLabelWidth" >
          <el-input v-model="depositsFrom.depositsName" autocomplete="off" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="depositsFrom.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级位置" :label-width="formLabelWidth">
          <div id="app">
            <treeselect v-model="selectId"  :options="options" />
          </div>
        </el-form-item>
        <el-form-item label="全路径" :label-width="formLabelWidth">
          <el-input v-model="depositsFrom.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标签" :label-width="formLabelWidth">
          <el-input v-model="depositsFrom.tag" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大容量" :label-width="formLabelWidth">
          <el-input v-model="depositsFrom.maxCapacity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="存放内容单位" :label-width="formLabelWidth">
          <el-select v-model="depositsFrom.stashUnit" placeholder="请选择">
            <el-option
                v-for="item in units"
                :key="item.id"
                :label="item.unit"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio v-model="depositsFrom.status" label="1">启用</el-radio>
          <el-radio v-model="depositsFrom.status" label="2">停用</el-radio>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="depositsFrom.context">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="depositsAdd">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改仓库" :visible.sync="dialogFormVisible1">
      <el-form :model="depositsFrom1">
        <el-form-item label="所属仓库" :label-width="formLabelWidth1" >
          <el-input v-model="depositsFrom1.depositsName" autocomplete="off" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth1">
          <el-input v-model="depositsFrom1.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级位置" :label-width="formLabelWidth1">
          <div id="app">
            <treeselect v-model="selectId1"  :options="options" />
          </div>
        </el-form-item>
        <el-form-item label="全路径" :label-width="formLabelWidth1">
          <el-input v-model="depositsFrom1.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标签" :label-width="formLabelWidth1">
          <el-input v-model="depositsFrom1.tag" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大容量" :label-width="formLabelWidth1">
          <el-input v-model="depositsFrom1.maxCapacity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="存放内容单位" :label-width="formLabelWidth1">
          <el-select v-model="depositsFrom1.stashUnit" placeholder="请选择">
            <el-option
                v-for="item in units"
                :key="item.id"
                :label="item.unit"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth1">
          <el-radio v-model="depositsFrom1.status" label="1">启用</el-radio>
          <el-radio v-model="depositsFrom1.status" label="2">停用</el-radio>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth1">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="depositsFrom1.context">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="updateDeposits">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'


export default {
  // register the component
  components: { Treeselect },
  name: "DepositsView",
  data() {
    return {
      depositsFrom1:{},
      selectId1:null,
      selectId:null,
      tableData:[],
      tableData1:[],
      tableData2:[],
      deposits:{
        depositId:1
      },
      depositsFrom:{},
      dialogFormVisible:false,
      dialogFormVisible1:false,
      formLabelWidth:'120px',
      formLabelWidth1:'120px',
      options: [],
      units:[],
    }
  }, methods: {
    updateDeposits(){
      this.depositsFrom1.depositsName = this.depositsFrom.depositsName;
      this.depositsFrom1.parentId=this.selectId1;
      this.axios.post("/deposits/updateDeposits",this.depositsFrom1).then(()=>{
        this.$message.success("修改成功");
        this.stashList();
      })
    },
    openUpdate(row){
      this.dialogFormVisible1 = true;
      this.depositsFrom1 = row;
      this.depositsFrom1.depositsName = this.depositsFrom.depositsName;
      this.selectId1 = this.selectId;
      this.depositsFrom1.depositId = this.depositsFrom.depositId;
    },
    delById(id){
      this.axios.post("/deposits/delById?id="+id).then(()=>{
        this.$message.success("删除成功");
        this.stashList();
      })
    },
    unitList(){
      this.axios.post("/deposits/depositUnit").then(res=>{
        this.units = res.data.data;
      })
    },
    optionsList(){
      this.axios.post("/deposits/depositsPath?depositId="+this.depositsFrom.depositId).then(res=>{
        this.options = res.data.data;
      })
    },
    openDepositsAdd(){
      this.dialogFormVisible = true;
    },
    depositsAdd(){
      this.depositsFrom.parentId=this.selectId;
      console.log(this.depositsFrom)
      this.axios.post("/deposits/depositsAdd",this.depositsFrom).then(()=>{

        this.dialogFormVisible = false;
        this.$message.success("添加成功");
        this.stashList();
      })
    },
    stashByIdTitleAndStatus(){
      this.axios.post("/deposits/depositsList",this.deposits).then(res=>{
        this.tableData1 = res.data.data;
      })
    },
    stashById(data){
      console.log("name=",data.name);
      console.log("id=",data.id);
      console.log("parentId="+data.parentId)
      this.deposits.depositId = data.id;
      this.depositsFrom.depositsName = data.name;
      this.depositsFrom.depositId = data.id;
      console.log("this.depositsFrom.depositId="+this.depositsFrom.depositId)
      this.optionsList();
      this.axios.post("/deposits/depositsList",this.deposits).then(res=>{
        this.tableData1 = res.data.data;
      })
    },
    stashList(){
      this.axios.post("/deposits/stashList").then(res=>{
        this.tableData = res.data.data;
      })
    }
  }, created() {
    this.stashList();
    this.unitList();
  }
}
</script>

<style scoped>

</style>
